import { useEffect, useState } from 'react';
import styles from './index.module.less';

const Termial = () => {
  const [terminalText, setTerminalText] = useState('');
  const fullText = `
> 个人信息
姓名: 陆星辰
职业: 全栈工程师 & 技术博主
技术栈: React / Node.js / Python
工作年限: 5年

> 获奖经历
- 2023 GitHub 年度贡献者
- 2022 开源中国优秀开发者
- 2021 全球技术创新大赛金奖

> 项目经历
- 开源项目 StarLight 主要贡献者
- 企业级微服务架构设计师
- AI 驱动的代码智能助手开发者

> 个人爱好
- 古典音乐 & 爵士乐
- 摄影 & 后期处理
- 徒步旅行 & 探索
`;
  useEffect(() => {
    let index = 0;
    const timer = setInterval(() => {
      if (index < fullText.length) {
        setTerminalText((prev) => prev + fullText.charAt(index));
        index++;
      } else {
        clearInterval(timer);
      }
    }, 50);

    return () => clearInterval(timer);
  }, [fullText]);

  return (
    <div className={styles.container}>
      <div className={styles.panel}>
        <div className={styles.topBar}>
          <div className={styles.dots}>
            <div className={`${styles.dot} ${styles.red}`} />
            <div className={`${styles.dot} ${styles.yellow}`} />
            <div className={`${styles.dot} ${styles.green}`} />
          </div>
        </div>
        <pre className={styles.pre}>
          <span className={styles.textGold}>@shiliang</span>
          <span className={styles.textWhite}>:</span>
          <span className={styles.textBrown}>~</span>
          <span className={styles.textWhite}>$ cat profile.txt</span>
          <br />
          <span>{terminalText}</span>
        </pre>
      </div>
    </div>
  );
};

export default Termial;
